<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航栏</title>
	
	<style>
		img{
			margin-right: 50%;
			display: inline-block;
		}
		ul{
			text-align: center;
			display: inline-block;
		}
		li{
			display: inline-block;
			margin-left: 30px;
			padding-left: 10px;
			padding-right: 10px;
			padding-bottom: 5px;
		}
		li:hover{
			color: red;
			border-bottom: 1px solid red;
		}
		/*
			CSS美化主要用到盒子模型margin，border，padding
			字体美化用到color，text-indent
			动态美化效果用伪类:hover、:link等;
		*/
	</style>
</head>
<body>
<!-- html的作用是规范页面结构，设置好文档的结构，在没有CSS的情况下也可以读懂页面内容，就已经做到比较好的html语义化 -->
	<nav>
		<img src="" alt="新世界">
		<ul>
			<li>首页</li>
			<li>最新活动</li>
			<li>项目介绍</li>
			<li>爱心社区</li>
			<li>关于我们</li>
			<li>登录</li>
		</ul>
	</nav>
</body>
</html>